Below is my JQuery code

<script type="text/javascript">
    $('#spnTop').on("click", function
() {
        var
percentageToScroll = 100;
        var
percentage = percentageToScroll / 100;
        var
height = jQuery(document).height();
        var
documentHeight = $(document).height();
        var
scroll = $(window).scrollTop();
        alert(scroll);
        var
scrollAmount = Math.round((height) * percentageToScroll / 100) - scroll;
 
        //alert(point);
        alert(scrollAmount);
        $('html,body').animate({
scrollTop: scrollAmount }, 'slow', function () {
            alert("reached
top");
        });
 
    });
    $('#spnbottom').on("click", function
() {
        var
percentageToScroll = 100;
        var
height = jQuery(document).innerHeight();
        var
documentHeight = $(document).height();
        var
scrollAmount = Math.round(height * percentageToScroll / 100);
        alert(scrollAmount);
        var
overheight = jQuery(document).height() - jQuery(window).height();
        jQuery("html,
body").animate({ scrollTop: scrollAmount }, 900);
    });
</script>

My HMTL Code: -

<span id="spnbottom">Bottom</span>
<div id="testDiv" style="height: 5000px; width: 400px; background: Red;">
</div>
<span id="spnTop">Top</span>